﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>@Model.AutoScaleGroupName - auto-scale dashboard</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="@Url.Content("~/_/logic/knockout.mapping.js")"></script>
    <script src="@Url.Content("~/_/logic/ASDashboard.js?v=2")" type="text/javascript"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: white;
        }

        #AllELBRequests {
            background-color: Black;
        }

        #AutoScaleGroups {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
            background-color: #666;
        }

            #AutoScaleGroups li {
                float: left;
                background-color: #666;
                color: white;
                padding: 10px;
            }

                #AutoScaleGroups li .min-instance-count {
                    clear: left;
                }

                #AutoScaleGroups li a {
                    color: inherit;
                }

        #CurrentGroup {
            clear: both;
        }

            #CurrentGroup h3 {
                margin-bottom: 0;
            }

        #InstanceCpuChart {
            width: 100%;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul id="AutoScaleGroups" data-bind="foreach: AutoScaleGroups">
        <li data-bind="attr: { 'data-group-name': Name}">
            <span class="name"><a data-bind="attr: { href: '/autoscale/' + Name()}, text: Name"></a></span>
            <div class="instance-details">
                <span class="min-instance-count" data-bind="text: MinInstanceCount"></span>
                <span clsas="desired-instance-count" data-bind="text: DesiredInstanceCount"></span>
                <span class="max-instance-count" data-bind="text: MaxInstanceCount"></span>
            </div>
        </li>

    </ul>
    <div id="CurrentGroup">
        <h3>Traffic (through load-balancer) (tdy, ydy, 1wk, 2wk)</h3>
        <div style="width: 100%; height: 150px;" id="AllELBRequests">
            <!-- requests chart -->
        </div>
        <h3>Instance Count History:</h3>
        <div style="width: 100%; height: 150px;" id="CapacityChart">
            <!-- requests chart -->
        </div>

        <h3>CPU Usage History<span id="CurrentCpu"></span>:</h3>
        <div style="width: 100%; height: 150px;" id="AllCpuChart">
            <!-- requests chart -->
        </div>

        <h3>Instance Health Status</h3>
        <div id="InstanceHealthStatus"></div>

        <h3>Instance CPU Usage History - <span><a href="#" id="showHide">show</a></span></h3>
        <div id="InstanceCpuChart">
            <span id="loadingProgress">
                <img src="@Url.Content("~/_/images/ajax-loader.gif")"/>
                loading...</span>
            <!-- requests chart -->
        </div>

        <script type="text/javascript">
            var mainELBMonitor;
            $(function () {
                mainELBMonitor = new ASDashboard("@Url.Action("AutoScaleGroups")", "@Url.Action("LoadBalancerData", "ELBMonitor")", "@Url.Action("DesiredCapacityHistory")", "@Url.Action("AllCpuHistory")", "@Url.Action("InstanceHealthStatus", "ELBMonitor")", "@Url.Action("InstanceCpuHistory")", 5000, "@Model.AutoScaleGroupName", "@Model.LoadBalancerName", "AllELBRequests", "CapacityChart", "AllCpuChart", "InstanceHealthStatus", "InstanceCpuChart");
                });
        </script>
    </div>

</body>
</html>






